<template>
  <div id="rider">
    <div class="businessmanMsg">
      <span>姓名</span>
      <input type="text" placeholder="请输入姓名" v-model="name">
    </div>
    <div class="businessmanMsg">
      <span>年龄</span>
      <input type="text" placeholder="请输入您的年龄" v-model="age">
    </div>
    <div class="businessmanMsg">
      <span>性别</span>
      <input type="text" placeholder="请输入您的性别" v-model="sex">
    </div>
    <div class="businessmanMsg">
      <span>联系电话</span>
      <input type="text" placeholder="请输入联系电话" v-model="phone">
    </div>
    <div class="businessmanMsg licenseImg">
      <span>身份证照片</span>
      <div>
        <img :src="zheng" alt @click="upimgz" class="upimgs">
        <img :src="fan" alt @click="upimgf" class="upimgs">
      </div>
    </div>
    <div class="sub" @click="sub">提交审核</div>
  </div>
</template>
<script>
export default {
  name: "rider",
  data() {
    return {
      name: "", //姓名
      age: "", //年龄
      phone: "", //电话
      sex: "", //性别
      zheng: require("@/assets/img/img_fbpl_pzsc.png"), //正面照片
      fan: require("@/assets/img/img_fbpl_pzsc.png") //反面照片
    };
  },
  methods: {
    upimgz(){
      let that = this
      dsBridge.call("uploadImg",3)
      dsBridge.register("addImgCallback",function (data) {

        // alert(data)
        that.zheng = data
        // let str = JSON.parse(data)
        // that.$toast.loading({
        //   message: "加载中..."
        // });
        // alert("12132")
        var Sukdata = {
          zurl: data
        };
        console.log(Sukdata);
        that.axios
          .post(that.baseUrl + "/store/storeZheng", that.Qs.stringify(Sukdata), {
            headers: {
              "Content-Type": "application/x-www-form-urlencoded"
            }
          })
          .then(function(res) {
            if (res.request.status === 200) {
              if (res.data.meta.code == 200) {
                // alert(res.data)
                // alert(that.zimg)
                // that.$toast.clear();
              } else if (res.data.meta.code == 501) {
              }
            }
          });
      })
    },
    upimgf(){
      let that = this
      dsBridge.call("uploadImg",4)
      dsBridge.register("addImgCallback",function (data) {
        that.fan = data
        // let str = JSON.parse(data)
        // that.$toast.loading({
        //   message: "加载中..."
        // });
        // alert("12132")
        var Sukdata = {
          zurl: data
        };
        console.log(Sukdata);
        that.axios
          .post(that.baseUrl + "/store/storeZheng", that.Qs.stringify(Sukdata), {
            headers: {
              "Content-Type": "application/x-www-form-urlencoded"
            }
          })
          .then(function(res) {
            if (res.request.status === 200) {
              if (res.data.meta.code == 200) {
                // alert(res.data)
                // alert(that.zimg)
                // that.$toast.clear();
              } else if (res.data.meta.code == 501) {
              }
            }
          });
      })
    },
    sub() {
      var that = this;
      var myreg = /^[1][3,4,5,7,8][0-9]{9}$/;
      if (
        this.name == "" ||
        this.age == "" ||
        this.phone == "" ||
        this.sex == ""
      ) {
        that.$toast("请完善资料");
      } else if (!myreg.test(that.phone)) {
        that.$toast("请输入正确手机号");
      } else {
        let that = this;
        var obj = {
          userId: localStorage.getItem('userid'),
          phone: that.phone,
          name: that.name,
          age: that.age,
          sex: that.sex,
          zheng: that.zheng,
          fan: that.fan
        };
        that.axios
          .post(that.baseUrl + "/riding/change", that.Qs.stringify(obj), {
            headers: {
              "Content-Type": "application/x-www-form-urlencoded"
            }
          })
          .then(function(res) {
            if (res.request.status === 200) {
              console.log(res.data);
              if (res.data.meta.code == 200) {
                that.$toast("申请成功，等待后台审核");
                that.$route.go(-1)
              } else {
                that.$toast("申请失败");
              }
            }
          });
      }
    }
  }
};
</script>
<style scoped>
.rider{
  font-size: 0.3rem;
}
.businessmanMsg {
  display: flex;
  align-items: center;
  width: 100%;
  border-top: 5px solid #ebebeb;
  padding-bottom: 15px;
  padding-top: 15px;
}
.businessmanMsg > span {
  display: block;
  float: left;
  margin-left: 15px;
  text-align: left;
  width: 20%;
  font-size: 16px;
}
.businessmanMsg > input {
  font-size: 16px;
  border: 0;
}
.licenseImg > span {
  width: 30%;
}
.licenseImg > div {
  width: 60%;
  text-align: left;
  margin: 0 auto;
  margin-top: 40px;
  height: 100px;
  position: relative;
}
.licenseImg:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
.licenseImg > div > img {

}
.licenseImg > div > img:first-child {
  position: absolute;
  left: 0;
  top: 0;
}
.licenseImg > div > img:last-child {
  position: absolute;
  right: 0;
  top: 0;
}
.sub {
  width: 90%;
  margin: 0 auto;
  height: 45px;
  text-align: center;
  line-height: 45px;
  background: #ff2f4e;
  color: #fff;
  border-radius: 20px;
  font-size: 16px;
  margin-top: 40px;
}
.upimgs{
  width: 2.4rem;
  height: 1.8rem;
}
</style>
